<template>
    <div id="allocation_examine_list">
        <el-card>
           <div class="check_box">
                <el-row :gutter="20" style="margin-bottom: 10px">
                    <el-col :span="4">
                        <div class="grid-content">
                            <el-input size="mini" v-model="transferOrderId" suffix-icon="el-icon-search" @change="handleChangeSearch" placeholder="请输入查询单号" clearable></el-input>
                        </div>
                    </el-col>
                    <el-col :span="5">
                        <div class="grid-content">
                            <el-select class="select-prefix" size="mini" v-model="senderStore" placeholder="请选择门店" @change="handleChangeSearch" clearable filterable>
                                <template slot = "prefix">
                                    <span class = 'prefixSlot'>调出门店</span>
                                </template>
                                <el-option-group
                                v-for="group in storeList"
                                :key="group.cityId"
                                :label="group.city">
                                    <el-option
                                        v-for="item in group.list"
                                        :key="item.storeNo"
                                        :label="item.storeName"
                                        :value="item.storeName">
                                    </el-option>
                                </el-option-group>
                            </el-select>
                        </div>
                    </el-col>
                    <el-col :span="5">
                        <div class="grid-content">
                            <el-select class="select-prefix" size="mini" v-model="receiverStore" @change="handleChangeSearch" placeholder="请选择门店" clearable filterable>
                                <template slot = "prefix">
                                    <span class = 'prefixSlot'>调入门店</span>
                                </template>
                                <el-option-group
                                v-for="group in storeList"
                                :key="group.cityId"
                                :label="group.city">
                                    <el-option
                                        v-for="item in group.list"
                                        :key="item.storeNo"
                                        :label="item.storeName"
                                        :value="item.storeName">
                                    </el-option>
                                </el-option-group>
                            </el-select>
                        </div>
                    </el-col> 
                    <el-col :span="5">
                        <div class="grid-content">
                            <el-select class="select-prefix" size="mini" v-model="applyUserId" @change="handleChangeSearch" clearable placeholder="请选择申请人" filterable>
                                <template slot = "prefix">
                                    <span class = 'prefixSlot'>申请人</span>
                                </template>
                               
                                <el-option
                                    v-for="item in userList"
                                    :key="item.userId"
                                    :label="item.personName"
                                    :value="item.userId">
                                </el-option>
                                
                            </el-select>
                        </div>
                    </el-col>
                    <el-col :span="5">
                        <div class="grid-content bg-purple">
                            <el-select class="select-prefix" size="mini" v-model="approveStatus" @change="handleChangeSearch" placeholder="请选则审批状态" clearable filterable>
                                <template slot = "prefix">
                                    <span class = 'prefixSlot'>审核状态</span>
                                </template>
                                <el-option
                                    v-for="item in statusOption"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                               
                            </el-select>
                        </div>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <div class="grid-content">
                            <el-date-picker
                            size="mini"
                            v-model="time"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            @change="handleChangeSearch"
                            >
                            </el-date-picker>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </el-card>
        <el-card class="mg-t-10">
            <el-table stripe :data="tableData" border>
                <el-table-column label="调拨单号" prop="transferOrderId" width="150"></el-table-column>
                <el-table-column label="申请日期" prop="gmtApply" show-overflow-tooltip></el-table-column>
                <el-table-column label="调出门店" prop="senderStore" show-overflow-tooltip></el-table-column>
                <el-table-column label="调入门店" prop="receiverStore" show-overflow-tooltip></el-table-column>
                <el-table-column label="申请数量" prop="applyQty" width="100"></el-table-column>
                <el-table-column v-if="approveStatus == 10"  label="出库数量" prop="pickingQty" width="100"></el-table-column>
                <el-table-column label="审核状态" >
                    <template slot-scope="scope">
                        <el-tag size="small"
                        :type="scope.row.approveStatus === 0 ? '' 
                        :scope.row.approveStatus === 1 ? 'warning' 
                        :scope.row.approveStatus === 2 ? 'success' 
                        :scope.row.approveStatus === -1 ? 'danger' : '' ">
                            {{ scope.row.approveStatus===0 ? '待提交' : scope.row.approveStatus === 1 ? '待审批' : 
                            scope.row.approveStatus === 2 ? (scope.row. outCount > scope.row.outCompleteCount ? '出库' + scope.row.outCompleteCount + '/' +scope.row.outCount : '已出库') : 
                            scope.row.approveStatus === -1 ? '已拒绝' : ''}}
                        </el-tag>
                    </template>
                </el-table-column>
                <!-- <el-table-column label="完成状态">
                    <template slot-scope="scope">
                        <el-tag size="small" :type="scope.row.isCompleted === 1 ? 'success' : 'danger'" >{{scope.row.isCompleted === 1 ? '已完成' : '未完成'}}</el-tag>
                    </template>
                </el-table-column> -->
                <el-table-column label="申请人" prop="applyUser"></el-table-column>
                <el-table-column  label="审批人" prop="approveUser"></el-table-column>
                <el-table-column label="操作" width="80">
                    <template slot-scope="scope">
                        <el-button type="text" size="mini" @click="handleCheck(scope.row.transferId)">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <page v-if="total" :total="total" :page="page" :size="size" @handlepagechange="handlePageChange" @handleSizeChange="handleSizeChange"></page>
            <allocationDetails v-if="isShowDetails" :isShowDetails="isShowDetails" :transferId="transferId" :detailsType="detailsType" @cancelShow="cancelShow" @getAllocationAuditList="getAllocationAuditList"></allocationDetails>
        </el-card>
    </div>
</template>
<script>
   import page from '../../../commonComponents/page'
   import allocationDetails from '../allocationTask/allocationDetails'
    export default {
        components: {page, allocationDetails},
        data() {
            return {
                tableData: [],
                page: 1,
                size: 10,
                total: 0,
                senderStore: '',
                receiverStore: '',
                transferOrderId: '',
                time: [],
                applyUserId: '',
                approveStatus: '100',
                storeList: [],
                userList: [],
                transferId: '',
                isShowDetails: false,
                detailsType: '2',
                statusOption: [
                    {
                        value: '100',
                        label: '全部'
                    },
                    {
                        value: '1',
                        label: '待审核'
                    },
                    {
                        value: '10',
                        label: '已审核'
                    }
                ]
            }
        },
        mounted() {
            this.getStoreListByGroup()
            this.getUsetList()
            this.getAllocationAuditList()
        },
        methods: {
            handleChangeSearch() {
                this.total= 0
                this.page= 1
                this.getAllocationAuditList()
            },
            /**获取用户 */
            getUsetList() {
                this.$server.systemControlApi.getUserList().then(res => {
                    this.userList= res.data
                })
            },
            getStoreListByGroup() {
                this.$server.systemControlApi.getStoreListByGroup().then(res => {
                    this.storeList= res.data
                })
            },
            getAllocationAuditList() {
                try {
                    let query= {
                        page: this.page,
                        size: this.size
                    };
                    let params= {
                        applyUserId: this.applyUserId,
                        approveStatus: +this.approveStatus,
                        gmtApplyBegin: this.time && this.time.length > 0 ? this.formate(new Date(this.time[0]).getTime(), 'yyyy-MM-dd') : '',
                        gmtApplyEnd: this.time && this.time.length > 0 ? this.formate(new Date(this.time[1]).getTime(), 'yyyy-MM-dd') : '',
                        receiverStore: this.receiverStore,
                        senderStore: this.senderStore,
                        transferOrderId: this.transferOrderId
                    };
                    this.$server.stockControlApi.getAllocationAuditList(query, params).then(res => {
                        
                        this.tableData= res.data
                        this.total= res.total
                    })
                }catch(err) {this.$paramsError(err)}
            },
            handleCheck(id) {
                this.transferId= id
                this.isShowDetails= true
            },
            handlePageChange(page) {
                this.page= page
                this.getAllocationAuditList()
            },
            handleSizeChange(size) {
                this.size= size
                this.getAllocationAuditList()
            },
            cancelShow(title) {
                this.isShowDetails= title
            }
        }
    }
</script>